import cssVars from 'css-vars-ponyfill'

export const lightTheme = {
    "@primary-color": "#1890ff", // 全局主色
    "@link-color": "#1890ff",// 链接色
    "@success-color": "#52c41a", // 成功色
    "@warning-color": "#faad14", // 警告色
    "@error-color": "#f5222d", // 错误色
    "@font-size-base": "14px", // 主字号
    "@heading-color": "rgba(0, 0, 0, 0.85)", // 标题色
    "@text-color": "rgba(0, 0, 0, 0.65)", // 主文本色
    "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // 次文本色
    "@disabled-color": "rgba(0, 0, 0, 0.25)", // 失效色
    "@border-radius-base": "4px", // 组件/浮层圆角
    "@border-color-base": "#d9d9d9", // 边框色
    "@box-shadow-base": "0 2px 8px rgba(0, 0, 0, 0.15)", // 浮层阴影
}

export const darkTheme = {
    "@primary-color": "#00000f", // 全局主色
    "@link-color": "#1890ff",// 链接色
    "@success-color": "#52c41a", // 成功色
    "@warning-color": "#faad14", // 警告色
    "@error-color": "#f5222d", // 错误色
    "@font-size-base": "14px", // 主字号
    "@heading-color": "rgba(0, 0, 0, 0.85)", // 标题色
    "@text-color": "rgba(255, 255, 255, 0.9)", // 主文本色
    "@text-color-secondary": "rgba(0, 0, 0, 0.45)", // 次文本色
    "@disabled-color": "rgba(0, 0, 0, 0.25)", // 失效色
    "@border-radius-base": "4px", // 组件/浮层圆角
    "@border-color-base": "#d9d9d9", // 边框色
    "@box-shadow-base": "0 2px 8px rgba(0, 0, 0, 0.15)", // 浮层阴影
}

export const initTheme = (theme) => {
    document.documentElement.setAttribute("data-theme", theme || "light")
    console.log(transformCssVar(theme === 'light' ? lightTheme : darkTheme))
    cssVars({
        watch: true,
        variables: transformCssVar(theme === 'light' ? lightTheme : darkTheme),
        onlyLegacy: true,
        include:'style:not([id*="less"])',
        exclude:'link'
    })
}

const transformCssVar = (theme) => {
    let vars = {}
    Object.keys(theme).forEach(key => {
        let varKey = `--${key.substr(1)}`
        vars[varKey] = theme[key]
    })
    vars['--antd-wave-shadow-color'] = theme['@primary-color']
    return vars
}